<template>
    <n-config-provider :theme-overrides="themeOverrides">
      <n-loading-bar-provider>
        <n-dialog-provider>
          <n-notification-provider>
            <n-message-provider>
              <slot></slot>
              <NaiveProviderContent />
            </n-message-provider>
          </n-notification-provider>
        </n-dialog-provider>
      </n-loading-bar-provider>
    </n-config-provider>
  </template>
  
  <script setup>
  import { defineComponent, h } from 'vue'
  import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
  
  const themeOverrides = {
    common: {
      primaryColor: '#316C72FF',
      primaryColorHover: '#316C72E3',
      primaryColorPressed: '#2B4C59FF',
      primaryColorSuppl: '#316C7263',
    },
  }
  
  // 挂载naive组件的方法至window, 以便在全局使用
  function setupNaiveTools() {
    window.$loadingBar = useLoadingBar()
    window.$dialog = useDialog()
    window.$message = useMessage()
    window.$notification = useNotification()
  }
  
  const NaiveProviderContent = defineComponent({
    setup() {
      setupNaiveTools()
    },
    render() {
      return h('div')
    },
  })
  </script>